<template>
	<div class="app">
		<div>
			<button @click="change">切换</button>
		</div>

		<transition>
			<h2 v-if="isShow">哈哈哈哈</h2>
		</transition>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	const isShow = ref(true)

	const change = () => {
		isShow.value = !isShow.value
	}
</script>

<style scoped>
	h2 {
		display: inline-block;
	}

	.v-leave-to,
	.v-enter-from {
		opacity: 0;
		transform: scale(0.5);
	}
	.v-enter-active,
	.v-leave-active {
		transition: all 2s ease;
	}
	.v-leave-from,
	.v-enter-to {
		opacity: 1;
		transform: scale(1);
	}
</style>
